<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>气候健康预测系统 | 概览</title>
    <link rel="stylesheet" href="https://s2.ssl.qhres2.com/static/56662140ef7d5d03.css">  
    <link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css">  
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>  
    <script src="https://cdn.jsdelivr.net/npm/luxon@3.0.1"></script>  
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.2.0"></script>  
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.4.0"></script>  
    <style>
        :root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --text: #34495e;
            --light: #ecf0f1;
            --dark: #2c3e50;
            --success: #27ae60;
            --warning: #f39c12;
            --danger: #e74c3c;
            --font-heading: 'Helvetica Neue', sans-serif;
            --font-body: 'Georgia', serif;
        }
 
        body {
            font-family: var(--font-body);
            color: var(--text);
            line-height: 1.6;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
            opacity: 0;
            animation: fadeIn 1s ease-in-out forwards;
        }
 
        @keyframes fadeIn {
            to { opacity: 1; }
        }
 
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }
 
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }
 
        .logo {
            font-family: var(--font-heading);
            font-weight: 300;
            font-size: 2rem;
            letter-spacing: 0.05em;
            color: var(--primary);
        }
 
        .logo span {
            font-weight: 700;
            color: var(--accent);
        }
 
        .date-display {
            font-family: var(--font-heading);
            font-size: 0.9rem;
            color: var(--text);
            opacity: 0.7;
        }
 
        h1, h2, h3, h4 {
            font-family: var(--font-heading);
            font-weight: 300;
            color: var(--dark);
            margin-top: 0;
        }
 
        h1 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            letter-spacing: 0.02em;
        }
 
        h2 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            letter-spacing: 0.01em;
        }
 
        .intro-text {
            font-size: 1.1rem;
            line-height: 1.8;
            max-width: 800px;
            margin-bottom: 3rem;
            color: var(--text);
        }
 
        .dashboard {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 2rem;
            margin-bottom: 3rem;
        }
 
        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            padding: 1.5rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
 
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
        }
 
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
 
        .card-title {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            font-weight: 500;
            color: var(--dark);
        }
 
        .card-icon {
            font-size: 1.2rem;
            color: var(--secondary);
        }
 
        .card-large {
            grid-column: span 8;
        }
 
        .card-medium {
            grid-column: span 6;
        }
 
        .card-small {
            grid-column: span 4;
        }
 
        .stat-value {
            font-family: var(--font-heading);
            font-size: 2.5rem;
            font-weight: 300;
            color: var(--primary);
            margin: 0.5rem 0;
        }
 
        .stat-label {
            font-size: 0.9rem;
            color: var(--text);
            opacity: 0.7;
        }
 
        .trend {
            display: inline-flex;
            align-items: center;
            font-size: 0.9rem;
            margin-left: 0.5rem;
        }
 
        .trend-up {
            color: var(--danger);
        }
 
        .trend-down {
            color: var(--success);
        }
 
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
 
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
 
        .data-table th {
            font-family: var(--font-heading);
            font-size: 0.8rem;
            text-align: left;
            padding: 0.75rem 1rem;
            background-color: var(--light);
            color: var(--dark);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
 
        .data-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            font-size: 0.9rem;
        }
 
        .data-table tr:last-child td {
            border-bottom: none;
        }
 
        .risk-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 0.5rem;
        }
 
        .risk-low {
            background-color: var(--success);
        }
 
        .risk-medium {
            background-color: var(--warning);
        }
 
        .risk-high {
            background-color: var(--danger);
        }
 
        footer {
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid rgba(0,0,0,0.1);
            font-size: 0.8rem;
            color: var(--text);
            opacity: 0.7;
            text-align: center;
        }
 
        @media (max-width: 1200px) {
            .card-large {
                grid-column: span 12;
            }
            .card-medium {
                grid-column: span 12;
            }
            .card-small {
                grid-column: span 6;
            }
        }
 
        @media (max-width: 768px) {
            .card-small {
                grid-column: span 12;
            }
            header {
                flex-direction: column;
                align-items: flex-start;
            }
            .date-display {
                margin-top: 0.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">Climate<span>Health</span></div>
            <div class="date-display">2025年4月4日 | 系统概览</div>
        </header>
 
        <h1>气候变化与呼吸道疾病预测系统</h1>
        <div class="intro-text">
            本系统通过整合气候数据、空气质量指标和流行病学数据，建立预测模型，评估气候变化对呼吸道疾病发病率的影响。当前数据显示，极端天气事件与特定呼吸道疾病之间存在显著相关性，本仪表板提供实时监测和预测分析。
        </div>
 
        <div class="dashboard">
            <div class="card card-small">
                <div class="card-header">
                    <div class="card-title">当前风险指数</div>
                    <div class="card-icon"><i class="fas fa-exclamation-triangle"></i></div>
                </div>
                <div class="stat-value">6.8 <span class="trend trend-up"><i class="fas fa-arrow-up"></i> 12%</span></div>
                <div class="stat-label">较上月变化</div>
                <div class="chart-container">
                    <canvas id="riskGauge"></canvas>
                </div>
            </div>
 
            <div class="card card-small">
                <div class="card-header">
                    <div class="card-title">预测病例数</div>
                    <div class="card-icon"><i class="fas fa-lungs"></i></div>
                </div>
                <div class="stat-value">3,428 <span class="trend trend-up"><i class="fas fa-arrow-up"></i> 8%</span></div>
                <div class="stat-label">未来30天预测</div>
                <div class="chart-container">
                    <canvas id="casesMiniChart"></canvas>
                </div>
            </div>
 
            <div class="card card-small">
                <div class="card-header">
                    <div class="card-title">空气质量指数</div>
                    <div class="card-icon"><i class="fas fa-wind"></i></div>
                </div>
                <div class="stat-value">127 <span class="trend trend-down"><i class="fas fa-arrow-down"></i> 5%</span></div>
                <div class="stat-label">全国平均值</div>
                <div class="chart-container">
                    <canvas id="aqiMiniChart"></canvas>
                </div>
            </div>
 
            <div class="card card-large">
                <div class="card-header">
                    <div class="card-title">气候与疾病关联趋势</div>
                    <div class="card-icon"><i class="fas fa-chart-line"></i></div>
                </div>
                <div class="chart-container">
                    <canvas id="mainTrendChart"></canvas>
                </div>
            </div>
 
            <div class="card card-medium">
                <div class="card-header">
                    <div class="card-title">关键影响因素</div>
                    <div class="card-icon"><i class="fas fa-weight-hanging"></i></div>
                </div>
                <div class="chart-container">
                    <canvas id="factorChart"></canvas>
                </div>
            </div>
 
            <div class="card card-large">
                <div class="card-header">
                    <div class="card-title">近期预警</div>
                    <div class="card-icon"><i class="fas fa-bell"></i></div>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>地区</th>
                            <th>风险等级</th>
                            <th>主要因素</th>
                            <th>预测影响</th>
                            <th>建议措施</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>华北平原</td>
                            <td><span class="risk-indicator risk-high"></span>高</td>
                            <td>PM2.5升高, 气温骤变</td>
                            <td>哮喘+23%, COPD+18%</td>
                            <td>发布健康预警, 加强监测</td>
                        </tr>
                        <tr>
                            <td>长江三角洲</td>
                            <td><span class="risk-indicator risk-medium"></span>中</td>
                            <td>湿度增加, 花粉浓度高</td>
                            <td>过敏性鼻炎+15%</td>
                            <td>公众健康教育</td>
                        </tr>
                        <tr>
                            <td>珠江三角洲</td>
                            <td><span class="risk-indicator risk-medium"></span>中</td>
                            <td>臭氧浓度上升</td>
                            <td>儿童呼吸道感染+12%</td>
                            <td>学校防护措施</td>
                        </tr>
                        <tr>
                            <td东北地区</td>
                            <td><span class="risk-indicator risk-low"></span>低</td>
                            <td>气温回升稳定</td>
                            <td>无明显变化</td>
                            <td>常规监测</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
 
        <footer>
            ClimateHealth Prediction System © 2025 | 数据更新于2025年4月4日 14:30 CST 
        </footer>
    </div>
 
    <script>
        // 设置全局图表默认值 
        Chart.defaults.font.family   = "'Helvetica Neue', sans-serif";
        Chart.defaults.color   = '#7f8c8d';
        Chart.defaults.borderColor   = 'rgba(0,0,0,0.05)';
 
        // 风险仪表盘 
        const riskGaugeCtx = document.getElementById('riskGauge').getContext('2d');  
        const riskGauge = new Chart(riskGaugeCtx, {
            type: 'doughnut',
            data: {
                labels: ['低风险', '中风险', '高风险'],
                datasets: [{
                    data: [30, 40, 30],
                    backgroundColor: ['#27ae60', '#f39c12', '#e74c3c'],
                    borderWidth: 0 
                }]
            },
            options: {
                cutout: '70%',
                rotation: -90,
                circumference: 180,
                plugins: {
                    legend: {
                        display: false 
                    },
                    tooltip: {
                        enabled: false 
                    }
                }
            }
        });
 
        // 病例迷你图 
        const casesMiniCtx = document.getElementById('casesMiniChart').getContext('2d');  
        const casesMiniChart = new Chart(casesMiniCtx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月'],
                datasets: [{
                    data: [2800, 3100, 3200, 3428],
                    borderColor: '#3498db',
                    backgroundColor: 'rgba(52, 152, 219, 0.1)',
                    borderWidth: 2,
                    tension: 0.3,
                    fill: true 
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false 
                    },
                    tooltip: {
                        enabled: false 
                    }
                },
                scales: {
                    x: {
                        display: false 
                    },
                    y: {
                        display: false 
                    }
                }
            }
        });
 
        // AQI迷你图 
        const aqiMiniCtx = document.getElementById('aqiMiniChart').getContext('2d');  
        const aqiMiniChart = new Chart(aqiMiniCtx, {
            type: 'bar',
            data: {
                labels: ['1月', '2月', '3月', '4月'],
                datasets: [{
                    data: [140, 135, 130, 127],
                    backgroundColor: [
                        'rgba(231, 76, 60, 0.7)',
                        'rgba(241, 196, 15, 0.7)',
                        'rgba(241, 196, 15, 0.7)',
                        'rgba(39, 174, 96, 0.7)'
                    ],
                    borderWidth: 0 
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false 
                    },
                    tooltip: {
                        enabled: false 
                    }
                },
                scales: {
                    x: {
                        display: false 
                    },
                    y: {
                        display: false 
                    }
                }
            }
        });
 
        // 主趋势图 
        const mainTrendCtx = document.getElementById('mainTrendChart').getContext('2d');  
        const mainTrendChart = new Chart(mainTrendCtx, {
            type: 'line',
            data: {
                labels: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12', '2025-01', '2025-02', '2025-03'],
                datasets: [
                    {
                        label: '平均气温 (°C)',
                        data: [2.1, 4.5, 8.7, 14.2, 19.8, 23.5, 26.3, 25.9, 21.4, 15.6, 9.3, 4.2, 1.8, 5.1, 10.3],
                        borderColor: '#e74c3c',
                        backgroundColor: 'rgba(231, 76, 60, 0.05)',
                        borderWidth: 2,
                        tension: 0.3,
                        yAxisID: 'y',
                        pointRadius: 0 
                    },
                    {
                        label: '呼吸道疾病病例数',
                        data: [2800, 2650, 2900, 3100, 2950, 2700, 2850, 3000, 3150, 3300, 3050, 3200, 3400, 3100, 3200],
                        borderColor: '#3498db',
                        backgroundColor: 'rgba(52, 152, 219, 0.05)',
                        borderWidth: 2,
                        tension: 0.3,
                        yAxisID: 'y1',
                        pointRadius: 0 
                    },
                    {
                        label: 'PM2.5浓度 (μg/m³)',
                        data: [120, 115, 130, 125, 110, 95, 85, 90, 100, 115, 125, 140, 135, 130, 127],
                        borderColor: '#2ecc71',
                        backgroundColor: 'rgba(46, 204, 113, 0.05)',
                        borderWidth: 2,
                        tension: 0.3,
                        yAxisID: 'y2',
                        pointRadius: 0,
                        borderDash: [5, 5]
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false 
                },
                plugins: {
                    tooltip: {
                        mode: 'index',
        intersect: false 
    },
    legend: {
        position: 'top',
        labels: {
            usePointStyle: true,
            padding: 20 
        }
    },
    annotation: {
        annotations: {
            line1: {
                type: 'line',
                yMin: 3000,
                yMax: 3000,
                borderColor: 'rgba(52, 152, 219, 0.5)',
                borderWidth: 1,
                borderDash: [5, 5],
                label: {
                    content: '警戒线',
                    enabled: true,
                    position: 'left'
                }
            },
            box1: {
                type: 'box',
                xMin: '2024-11',
                xMax: '2025-02',
                backgroundColor: 'rgba(241, 196, 15, 0.1)',
                borderColor: 'rgba(241, 196, 15, 0.3)',
                borderWidth: 1,
                label: {
                    content: '高风险期',
                    enabled: true,
                    position: 'top'
                }
            }
        }
    }
},
scales: {
    x: {
        grid: {
            display: false 
        }
    },
    y: {
        type: 'linear',
        display: true,
        position: 'left',
        title: {
            display: true,
            text: '温度 (°C)'
        },
        grid: {
            drawOnChartArea: false 
        }
    },
    y1: {
        type: 'linear',
        display: true,
        position: 'right',
        title: {
            display: true,
            text: '病例数'
        },
        grid: {
            drawOnChartArea: false 
        }
    },
    y2: {
        type: 'linear',
        display: false,
        position: 'right',
        grid: {
            drawOnChartArea: false 
        }
    }
}
            }
        });

        // 影响因素图 
        const factorCtx = document.getElementById('factorChart').getContext('2d');  
        const factorChart = new Chart(factorCtx, {
            type: 'radar',
            data: {
                labels: ['温度变化', '湿度', 'PM2.5', '花粉浓度', '臭氧', '风速', '气压变化', '紫外线指数'],
                datasets: [
                    {
                        label: '哮喘',
                        data: [0.85, 0.65, 0.9, 0.7, 0.6, 0.4, 0.5, 0.3],
                        backgroundColor: 'rgba(52, 152, 219, 0.2)',
                        borderColor: '#3498db',
                        borderWidth: 2,
                        pointBackgroundColor: '#3498db'
                    },
                    {
                        label: 'COPD',
                        data: [0.7, 0.5, 0.95, 0.4, 0.55, 0.3, 0.6, 0.2],
                        backgroundColor: 'rgba(231, 76, 60, 0.2)',
                        borderColor: '#e74c3c',
                        borderWidth: 2,
                        pointBackgroundColor: '#e74c3c'
                    },
                    {
                        label: '过敏性鼻炎',
                        data: [0.4, 0.8, 0.6, 0.95, 0.3, 0.5, 0.4, 0.6],
                        backgroundColor: 'rgba(46, 204, 113, 0.2)',
                        borderColor: '#2ecc71',
                        borderWidth: 2,
                        pointBackgroundColor: '#2ecc71'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label   + ': ' + (context.raw   * 100).toFixed(0) + '%';
                            }
                        }
                    }
                },
                scales: {
                    r: {
                        angleLines: {
                            display: true,
                            color: 'rgba(0,0,0,0.05)'
                        },
                        suggestedMin: 0,
                        suggestedMax: 1,
                        ticks: {
                            display: false,
                            stepSize: 0.2 
                        },
                        pointLabels: {
                            font: {
                                size: 11 
                            }
                        }
                    }
                }
            }
        });

        // 页面加载动画 
        document.addEventListener('DOMContentLoaded',   function() {
            setTimeout(function() {
                document.body.style.opacity   = '1';
            }, 100);
        });
    </script>
</body>
</html>